<template>
	<myPopupVue ref="isImportList">
		<view class="importList_main_title base_box oneLine">
			导入记录列表 <view class="importList_main_title_text">共导入{{showListCount}}条记录</view> 
		</view>
		<scroll-view scroll-y class="importList_scroll">
			<view class="importList" v-for="(one,index) in showList" :key="one">
				<view class="importList_title oneLine">
					{{one.month}} <view class="importList_title_total">{{moneySymbol}}{{one.total}}</view>
				</view>
				<view class="index_list_box base_box" v-for="the in one.list">
					<TextOneTitle2Vue :left="dateTypeFormat('mm-dd',new Date(the[0].timeValue))"
						:right="moneySymbol+getTotal(the)" />
					<TextOneLine3Vue :first="item.showOne" :mid="item.notesValue" :end="moneySymbol+item.addValue"
						:tag="item.showClass" v-for="(item ,index) in the" :key="item" />
				</view>
			</view>
		</scroll-view>
	</myPopupVue>
</template>

<script setup>
	import TextOneTitle2Vue from "@/components/TextOneTitle2.vue";
	import TextOneLine3Vue from "@/components/TextOneLine3.vue";
	import myPopupVue from '@/components/base/myPopup.vue';
	import {
		ref,
		computed,
	} from 'vue'
	import {
		dateTypeFormat,
		takeClassList
	} from "@/uitls/tool.js"
	import store from "@/store/index.js"
	const moneySymbol = computed(() => store.state.setting.MoneySymbol)
	const isImportList = ref()
	const open = (data) => {
		isImportList.value.open()
		showList.value = takeShowList(data)
	}
	defineExpose({
		open
	})
	const showList = ref()
	const showListCount=ref(0)
	const getTotal = (data) => {
		if (data == void 0 || data == null || JSON.stringify(data) == "{}") return;
		let total = 0
		data.forEach(item => {
			if (item.showClass == 0) total -= item.addValue
			else total += item.addValue
		})
		return total
	}
	const takeShowList = (data) => {
		if (data == void 0 || data == null || JSON.stringify(data) == "{}") return;
		let outer = []
		let monthList = Object.keys(data).filter((item) => {
			let date = new Date(item);
			return !isNaN(date.getTime());
		}).sort() // 去掉 tag属性 的Data列表
		for (let one of monthList) {
			let oneMonth = {
				month: one,
				list: takeClassList(data[one], (item) => item.timeValue),
				total: 0
			}
			oneMonth.total = getTotal(data[one])
			showListCount.value+=data[one].length
			outer.push(oneMonth)
		}
		return outer
	}
</script>

<style lang="scss" scoped>
	@import "@/style/base.scss";

	.importList_main_title {
		background: $baseColor_mid ;
		padding: 0.5em;
		font-weight: bold;
		color: $baseWhite;
		display: flex;
		align-items: baseline;
		.importList_main_title_text{
			margin-left: 1em;
			font-size: $smallFontsize;
		}
	}

	.importList_scroll {
		max-height: 50vh;
		width: $bigPopupWidth;

		.importList {
			margin-top: 0.5em;
			border-bottom: $baseBorder;

			.importList_title {
				font-size: $bigFontsize;
				font-weight: bold;
				margin-left: 0.5em;
				display: flex;
				align-items: baseline;
				.importList_title_total {
					margin-left: 0.5em;
					font-size: $midFontsize;
					opacity: 0.7;
				}
			}
		}
	}
</style>